<div id="carousel-container" class="carousel slide" data-ride="carousel">
	{php $slides = app_slide();}
	<ol class="carousel-indicators">
		{php $slideNum = 0;}
		{loop $slides $row}
		<li data-target="#carousel-container" data-slide-to="{$slideNum}"{if $slideNum == '0'} class="active"{/if}></li>
		{php $slideNum++;}
		{/loop}
	</ol>

	<div class="carousel-inner" role="listbox">
		{loop $slides $row}
		<div class="item{if $slides[0] == $row} active{/if}">
			<img src="{$row['thumb']}" alt="{$row['title']}" style="width:100%;height:15em;">
			<div class="carousel-caption">
				{$row['title']}
			</div>
		</div>
		{/loop}
	</div>
</div>
<script>
	require(['bootstrap', 'jquery.hammer'], function($){
		$('#carousel-container').carousel();
		$('#carousel-container').hammer().on('swipeleft', function(e){
			$('#carousel-container').carousel('next');
		});
		$('#carousel-container').hammer().on('swiperight', function(e){
			$('#carousel-container').carousel('prev');
		});
	});
</script>
